<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one or more
  ~ contributor license agreements.  See the NOTICE file distributed with
  ~ this work for additional information regarding copyright ownership.
  ~ The ASF licenses this file to You under the Apache License, Version 2.0
  ~ (the "License"); you may not use this file except in compliance with
  ~ the License.  You may obtain a copy of the License at
  ~
  ~    http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  ~
  -->

<div fxLayout="row">
    <div
        fxFlex="20"
        fxLayout="column"
        class="designer-panel-content"
        *ngIf="assetModel"
    >
        <sp-basic-view [showBackLink]="false">
            <div nav fxLayout="row">
                <h4 class="ml-5">Asset Hierarchy</h4>
            </div>
            <div fxFlex="100" fxLayout="column">
                <div fxFlex fxLayout="column" class="designer-panel-config">
                    <mat-tree
                        [dataSource]="dataSource"
                        [treeControl]="treeControl"
                        class="sp-tree"
                        #tree
                    >
                        <mat-tree-node
                            *matTreeNodeDef="let node"
                            matTreeNodeToggle
                        >
                            <div
                                [ngClass]="
                                    node.assetId === selectedAsset.assetId
                                        ? 'asset-node selected-node'
                                        : 'asset-node'
                                "
                                fxLayout="row"
                                fxFlex="100"
                                (click)="selectNode(node, false)"
                            >
                                <span fxLayoutAlign="end center" class="ml-5">{{
                                    node.assetName
                                }}</span>
                                <div
                                    fxLayoutAlign="end center"
                                    fxFlex
                                    *ngIf="editMode"
                                >
                                    <button
                                        mat-icon-button
                                        (click)="addAsset(node)"
                                        color="accent"
                                    >
                                        <i class="material-icons">add</i>
                                    </button>
                                    <button
                                        mat-icon-button
                                        (click)="deleteAsset(node)"
                                        color="accent"
                                    >
                                        <i class="material-icons">delete</i>
                                    </button>
                                </div>
                            </div>
                        </mat-tree-node>
                        <mat-nested-tree-node
                            *matTreeNodeDef="let node; when: hasChild"
                        >
                            <div class="mat-tree-node">
                                <button
                                    mat-icon-button
                                    matTreeNodeToggle
                                    [attr.data-cy]="'button-' + node.nodeName"
                                    [attr.aria-label]="
                                        'Toggle ' + node.nodeName
                                    "
                                >
                                    <mat-icon class="mat-icon-rtl-mirror">
                                        {{
                                            treeControl.isExpanded(node)
                                                ? 'expand_more'
                                                : 'chevron_right'
                                        }}
                                    </mat-icon>
                                </button>
                                <div
                                    [ngClass]="
                                        node.assetId === selectedAsset.assetId
                                            ? 'asset-node selected-node'
                                            : 'asset-node'
                                    "
                                    fxLayout="row"
                                    fxFlex="100"
                                    (click)="selectNode(node, true)"
                                >
                                    <span fxLayoutAlign="start center">{{
                                        node.assetName
                                    }}</span>
                                    <div
                                        fxLayoutAlign="end center"
                                        fxFlex
                                        *ngIf="editMode"
                                    >
                                        <button
                                            mat-icon-button
                                            (click)="addAsset(node)"
                                            color="accent"
                                        >
                                            <i class="material-icons">add</i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div
                                [class.sp-tree-invisible]="
                                    !treeControl.isExpanded(node)
                                "
                                role="group"
                            >
                                <ng-container matTreeNodeOutlet></ng-container>
                            </div>
                        </mat-nested-tree-node>
                    </mat-tree>
                </div>
            </div>
        </sp-basic-view>
    </div>
    <div fxFlex>
        <ng-content></ng-content>
    </div>
</div>
